<!--
 * @Descripttion: 编辑会员等级
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:01:52
-->
<template>
  <div class="lb-edit-card">
    <top-nav :isBack="true"></top-nav>
    <div class="page-main" v-loading="loading">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="aForm"
        label-width="180px"
        class="basic-form"
      >
        <lb-classify-title title="基础信息"></lb-classify-title>
        <div style="height: 30px"></div>
        <div class="flex-warp">
          <div class="mr-lg">
            <el-form-item label="等级名称" prop="title">
              <el-input
                v-model="subForm.title"
                type="text"
                maxlength="10"
                show-word-limit
                placeholder="请输入VIP等级名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="等级背景色" prop="color">
              <div class="flex-warp mt-sm">
                <div v-for="(item, index) in colorList" :key="index">
                  <div
                    @click="changeIndex(index)"
                    class="color-item"
                    :class="[{ active: index === colorInd }]"
                    v-if="index < colorList.length - 1"
                  >
                    <div class="flex-center">
                      <div class="primaryColor flex-center">
                        <div
                          class="color-bg"
                          :style="{ background: item }"
                        ></div>
                      </div>
                    </div>
                    <i
                      class="
                        iconfont
                        icongouxuan-xuanzhong-yuankuang
                        flex-center
                      "
                      v-if="index === colorInd"
                    ></i>
                  </div>
                  <div v-if="index == colorList.length - 1">
                    <div
                      @click="changeIndex(index)"
                      class="color-item"
                      :class="[{ active: index === colorInd }]"
                      style="width: auto; padding: 0 2px"
                    >
                      <div class="flex-center" style="margin-top: 4px">
                        <el-color-picker
                          @change="changeColor"
                          size="mini"
                          style="margin-right: 4px"
                          v-model="colorList[index]"
                        ></el-color-picker>
                      </div>
                      <div
                        class="flex-y-center"
                        style="height: 18px; margin-top: 4px"
                      >
                        <div style="line-height: 18px; font-size: 10px">
                          自定义配色
                        </div>
                        <i
                          class="
                            iconfont
                            icongouxuan-weixuanzhong-xianxingyuankuang
                            flex-center
                          "
                          :class="[
                            {
                              'icongouxuan-xuanzhong-yuankuang':
                                index === colorInd
                            }
                          ]"
                          style="margin: 0"
                        ></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="获得等级条件"
              prop="growth"
              v-show="subForm.top !== 999"
            >
              <el-input
                :placeholder="last_level_growth"
                v-model.number="subForm.growth"
              >
                <template slot="prepend">成长值达到</template>
              </el-input>
              <lb-tool-tips
                >修改成长值会影响现有会员用户的会员等级</lb-tool-tips
              >
            </el-form-item>
            <el-form-item
              label="会员有效期"
              prop="growth"
              v-show="subForm.top === 999"
            >
              <el-select
                v-model="subForm.over_time"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in plusList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <div class="ml-lg">
            <div class="card-vip" :style="{ background: subForm.color }">
              <div class="card-vip line-bg f-icontext c-base rel">
                <img
                  class="card-vip-bg abs"
                  src="https://lbqny.migugu.com/admin/member/vip_bg.png"
                />
                <div class="flex-y-center">
                  <img
                    class="avatar circle"
                    style="border: 2px solid rgba(255, 255, 255, 0.1)"
                    src="https://card-1253902191.cos.ap-chengdu.myqcloud.com/image/8895/20/05/2c98a7849fdd11ea8f814b770d10da8d.jpg"
                  />
                  <div class="nickname f-paragraph text-bold ml-sm">
                    用户昵称
                  </div>

                  <div class="vip-content rel">
                    <img
                      class="vip-bg abs"
                      src="https://lbqny.migugu.com/admin/member/vip.png"
                    />
                    <div
                      class="vip-level abs flex-center flex-column trans-sclae"
                    >
                      VIP
                    </div>
                    <div class="vip-name flex-center flex-column">
                      <div class="trans-sclae">
                        {{ subForm.title || '等级名称' }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="text-right mt-lg">
                  <!-- <div>{{subForm.title || '会员'}}</div> -->
                  <div>
                    {{ configInfo.growth_title }}
                    {{ parseInt((subForm.growth || 1000) * 0.4) }}/{{
                      subForm.growth || 1000
                    }}
                  </div>
                </div>
                <div class="card-line mt-sm mb-sm">
                  <div class="current fill-base"></div>
                </div>
                <div>
                  {{
                    subForm.top === 999 ? `有效期至 ${over_time}` : '终生有效'
                  }}
                </div>
                <div class="space-md"></div>
                <div class="mt-sm mb-sm">{{ configInfo.integral_title }}</div>
                <div class="f-big-title">56669</div>
              </div>
            </div>
            <lb-tool-tips mode="text"
              ><div class="c-warning">
                仅为模拟效果，实际以小程序显示效果为准
              </div></lb-tool-tips
            >
          </div>
        </div>
        <!-- <el-form-item label="保级条件" prop="title">
        <el-input placeholder="0 至 9999999" v-model="input1">
          <template slot="prepend">核算期间{{configInfo.growth_title}}</template>
        </el-input>
        <lb-tool-tips>若升降级规则中选择【暂不降级】，则保级条件无效，不填写则默认0</div>
        </el-form-item>-->
        <div style="height: 30px"></div>
        <lb-classify-title title="权益信息"></lb-classify-title>
        <div style="height: 30px"></div>
        <el-form-item label="权益" prop>
          <el-checkbox-group v-model="checkRight">
            <div
              v-for="(item, index) in rightList"
              :key="index"
              :class="[{ 'mt-md': index !== 0 }]"
            >
              <el-checkbox
                :label="item.title"
                style="width: 130px"
              ></el-checkbox>
              <span class="lb-tips-text" v-if="item.text === 'placeholder'">{{
                item.placeholder
              }}</span>
              <block v-else>
                <el-input
                  :placeholder="item.placeholder"
                  v-model="subForm[item.val]"
                  style="width: 300px"
                >
                  <template slot="append">{{ item.text }}</template>
                </el-input>
              </block>
            </div>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="升级礼包" prop>
          <el-checkbox-group @change="changeUpCheckGroup" v-model="checkUp">
            <div
              v-for="(item, index) in upList"
              :key="index"
              :class="[{ 'mt-md': index !== 0 }]"
            >
              <el-checkbox
                :label="item.title"
                style="width: 130px"
              ></el-checkbox>
              <block v-if="item.key === 'coupon_switch'">
                <el-tag
                  v-if="subForm[item.key] === 1"
                  @click="showQuanDialog"
                  style="cursor: pointer"
                  >{{ item.text }}</el-tag
                >
              </block>
              <el-input
                :placeholder="item.placeholder"
                v-model="subForm[item.val]"
                style="width: 300px"
                v-else
              >
                <template slot="append">{{ item.text }}</template>
              </el-input>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item prop v-show="subForm.coupon_switch === 1">
          <div>已选</div>
          <el-table
            :data="multipleSelection"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            style="width: 430px"
          >
            <el-table-column prop="title" label="优惠券名称"></el-table-column>
            <el-table-column
              prop="num"
              label="数量"
              width="100"
            ></el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="自定义权益" prop>
          <el-checkbox-group v-model="checkCustom">
            <div
              v-for="(item, index) in customRights"
              :key="index"
              style="display: inline-block"
              :style="{ marginLeft: index === 0 ? 0 : '20px' }"
            >
              <el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
              <!-- <el-checkbox :label="item.title"></el-checkbox> -->
            </div>
          </el-checkbox-group>
          <div
            @click="$router.push(`${appPath}/vip/right`)"
            class="lb-tips-text c-link"
            :class="[{ 'mt-md': customRights.length < 1 }]"
            style="cursor: pointer; display: inline-block"
          >
            权益不够用？去添加自定义权益
          </div>
        </el-form-item>

        <div style="height: 30px"></div>
        <lb-classify-title title="购买会员"></lb-classify-title>
        <div style="height: 30px"></div>
        <el-form-item label="开启购买商品送会员" prop="is_goods">
          <el-radio-group v-model="subForm.is_goods">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>
            若开启购买商品，则被选择的商品SPU
            不会显示在正常商品列表，请单独添加一个会员相关商品SPU
            <p class="c-warning" v-if="subForm.top === 999">
              PLUS 会员多次购买商品则会叠加会员有效期
            </p>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item v-if="subForm.is_goods === 1">
          <el-select
            v-model="goods_id"
            filterable
            clearable
            placeholder="请选择商品"
          >
            <el-option
              v-for="item in goodsSelect"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="储值升级"
          prop="stored_switch"
          v-show="subForm.top === 999"
        >
          <el-radio-group v-model="subForm.stored_switch">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips>
            开启之后，用户充值购买了储值套餐，则会自动成为该等级会员
            <p class="c-warning" v-if="subForm.top === 999">
              PLUS会员多次充值不会增加会员有效期，只有首次充值成为PLUS会员才会增加有效期
            </p>
          </lb-tool-tips>
        </el-form-item>
        <el-form-item
          v-show="subForm.top === 999 && subForm.stored_switch === 1"
        >
          <el-select
            v-model="stored_id"
            filterable
            clearable
            placeholder="请选择套餐"
          >
            <el-option
              v-for="item in storedSelect"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <lb-button @click="submitFormInfo" type="primary">{{
            $t('action.submit')
          }}</lb-button>
          <lb-button @click="goBack">{{ $t('action.back') }}</lb-button>
        </el-form-item>
      </el-form>

      <el-dialog
        title="选择优惠券"
        :visible.sync="chooseQuanDialog"
        width="800px"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="true"
        :before-close="beforeQuanClose"
      >
        <div class="dialog-link-box">
          <div class="link-right" :style="{ width: '100%' }">
            <el-form
              @submit.native.prevent
              :inline="true"
              :model="quanSearchForm"
            >
              <el-form-item label>
                <el-input
                  v-model="quanSearchForm.title"
                  placeholder="请输入名称"
                ></el-input>
              </el-form-item>
              <el-form-item label>
                <lb-button type="primary" @click="getQuanList(1)">{{
                  $t('action.search')
                }}</lb-button>
              </el-form-item>
            </el-form>
            <el-table
              v-loading="loading"
              :data="quan_list"
              ref="multipleTable"
              :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
                :selectable="selectable"
              ></el-table-column>
              <el-table-column
                prop="id"
                label="ID"
                width="120"
              ></el-table-column>
              <el-table-column
                prop="title"
                label="优惠券名称"
              ></el-table-column>
              <!-- <el-table-column prop="title" label="库存"></el-table-column> -->
              <el-table-column prop="title" label="数量" width="220">
                <template slot-scope="scope">
                  <el-input-number
                    v-model="scope.row.num"
                    @change="handleChange"
                    :precision="0"
                    :min="1"
                    :max="100"
                  ></el-input-number>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="space-lg"></div>
        <div class="text-right mt-lg">
          <el-button @click="chooseQuanDialog = false">取 消</el-button>
          <el-button type="primary" @click="handleQuanConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateIntMax = (rule, value, callback) => {
      value =
        this.subForm.top === 999 ? this.subForm.over_time : this.subForm.growth
      if (this.subForm.top === 999) {
        callback()
      } else {
        if (!value) {
          callback(new Error('请输入'))
        } else if (!/^\+?[0-9]*$/.test(value)) {
          callback(new Error('请输入非负整数'))
        } else if (
          value * 1 < this.last_growth ||
          value * 1 > this.next_level_growth
        ) {
          callback(
            new Error(
              `请输入${this.last_growth}-${this.next_level_growth}内的整数`
            )
          )
        } else {
          callback()
        }
      }
    }
    return {
      appPath: '',
      loading: true,
      plusList: [
        {
          id: 1,
          title: '1 个月'
        },
        {
          id: 3,
          title: '3 个月'
        },
        {
          id: 6,
          title: '6 个月'
        },
        {
          id: 12,
          title: '12 月'
        },
        {
          id: 24,
          title: '24 月'
        },
        {
          id: -1,
          title: '无限期'
        }
      ],
      colorList: [
        '#739bc6',
        '#60a06a',
        '#d4b64c',
        '#c09e51',
        '#d5964b',
        '#c26a51',
        '#ffb6b1',
        '#b0b4c7',
        '#616570',
        '#616570'
      ],
      colorInd: 0,
      rules: [
        {
          title: '商品打折',
          key: 'discount_switch',
          val: 'discount',
          placeholder: '提交之后请前去商品信息中设置会员折扣',
          text: 'placeholder'
        },
        {
          title: '积分倍率',
          key: 'integral_switch',
          val: 'integral',
          placeholder: '请输入大于0小于100的整数',
          text: '倍'
        },
        {
          title: '分销收益率',
          key: '',
          placeholder: '请输入大于0小于100的整数',
          text: '%'
        },
        {
          title: '赠送积分',
          key: 'send_integral_switch',
          val: 'send_integral',
          placeholder: '请输入大于0小于999999的整数',
          text: '积分'
        },
        {
          title: '会员送券',
          key: 'coupon_switch',
          val: 'coupon',
          placeholder: '',
          text: '选取优惠券'
        }
      ],
      rightList: [],
      checkRight: [],
      upList: [],
      checkUp: [],
      goodsSelect: [],
      goods_id: '',
      storedSelect: [],
      stored_id: '',
      customRights: [],
      checkCustom: [],
      // 基本信息
      last_level_growth: '',
      last_growth: '',
      next_level_growth: '',
      configInfo: {},
      over_time: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      subForm: {
        id: '',
        title: '',
        color: '',
        growth: '',
        over_time: 1,
        discount_switch: 0,
        integral: '',
        integral_switch: 0,
        send_integral: '',
        send_integral_switch: 0,
        upgrade_integral: '',
        upgrade_integral_switch: 0,
        rights: [],
        coupon_switch: 0,
        coupon: [],
        is_goods: 1,
        goods_id: [],
        stored_switch: 1,
        stored_id: [],
        top: ''
      },
      subFormRules: {
        title: {
          required: true,
          type: 'string',
          message: '请输入VIP等级名称',
          trigger: 'blur'
        },
        color: {
          required: true,
          type: 'string',
          message: '请选择背景色',
          trigger: 'blur'
        },
        growth: {
          required: true,
          type: 'number',
          validator: validateIntMax,
          trigger: 'blur'
        },
        is_goods: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'blur'
        },
        stored_switch: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'blur'
        }
      },
      chooseQuanDialog: false,
      quan_total: 0,
      quanSearchForm: {
        page: 1,
        limit: 100000000,
        title: ''
      },
      quan_list: [],
      multipleSelection: [],
      selectable (row, index) {
        if (row.number > 0) {
          return true
        } else {
          return false
        }
      }
    }
  },
  async created () {
    let { path } = this.$route
    this.appPath = path.includes('app/') ? '/app' : ''
    let { id } = this.$route.query
    this.subForm.id = id
    await Promise.all([this.getConfig(), this.getGoods(), this.getQuanList()])
    await this.getDetail()
    this.loading = false
  },
  methods: {
    async changeIndex (index) {
      this.colorInd = index
      this.subForm.color = this.colorList[index]
    },
    changeColor (e) {
      this.subForm.color = e
    },
    changeUpCheckGroup (e) {
      this.upList.map((item) => {
        this.subForm[item.key] = 0
        e.map((aitem) => {
          if (item.title === aitem) {
            this.subForm[item.key] = 1
          }
        })
      })
    },
    goBack () {
      this.$router.back(-1)
    },
    async getConfig () {
      let { code, data } = await this.$api.memberConfigInfo()
      if (code !== 200) return
      this.configInfo = data
    },
    async getGoods () {
      let { id } = this.subForm
      let { code, data } = await this.$api.memberMemberGoods({ id })
      if (code !== 200) return
      let { goods, stored, rights, defult_rights: defaultRight } = data
      this.goodsSelect = goods
      this.storedSelect = stored
      this.customRights = rights
      let right = []
      let up = []
      defaultRight.map((item) => {
        if (item.is_up === 1) {
          up.push(item)
        } else {
          right.push(item)
        }
      })
      this.rules.map((item) => {
        right.map((aitem) => {
          if (aitem.title === item.title) {
            this.rightList.push(Object.assign({}, aitem, item))
          }
        })
        up.map((bitem) => {
          if (bitem.title === item.title) {
            this.upList.push(Object.assign({}, bitem, item))
          }
        })
      })
    },
    async getQuanList (flag) {
      if (flag) this.quanSearchForm.page = 1
      let { code, data } = await this.$api.memberCouponSelect(
        this.quanSearchForm
      )
      if (code !== 200) return
      data.data.map((item) => {
        item.num = 1
        item.check = false
        if (this.multipleSelection.length < 1) return
        this.multipleSelection.map((aitem) => {
          if (item.id === aitem.id) {
            item.num = aitem.num
            item.check = aitem.check
          }
        })
      })
      this.quan_list = data.data
    },
    showQuanDialog () {
      this.chooseQuanDialog = true
      let arr = []
      this.multipleSelection.map((item) => {
        arr.push(item.id)
      })
      this.quan_list.map((item) => {
        if (arr.includes(item.id)) {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(item, true)
          })
        }
      })
    },
    handleSelectionChange (val) {
      let arr = []
      val.map((item) => {
        arr.push(item.id)
      })
      this.quan_list.map((bitem, bindex) => {
        this.quan_list[bindex].check = false
        if (arr.includes(bitem.id)) {
          this.quan_list[bindex].check = true
        }
      })
    },
    handleQuanConfirm () {
      let data = []
      this.quan_list.map((item) => {
        if (item.check) {
          data.push(item)
        }
      })
      this.multipleSelection = data
      this.chooseQuanDialog = false
    },
    handleSizeChange (val) {
      this.quanSearchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.quanSearchForm.page = val
      this.getQuanList()
    },
    async getDetail () {
      let { id } = this.subForm
      this.subForm.color = this.colorList[this.colorInd]
      let { code, data } = await this.$api.memberLevelInfo({ id })
      if (code !== 200) return
      if (!data.color || data.color === '0') {
        data.color = this.colorList[0]
      }
      let ind = -1
      this.colorList.map((item, index) => {
        if (item === data.color) {
          ind = index
        }
      })
      this.colorInd = ind === -1 && data.color ? this.colorList.length - 1 : ind
      if (ind === -1 && data.color) {
        this.colorList[this.colorList.length - 1] = data.color
      }
      let checkRight = []
      let checkUp = []
      let checkCustom = []
      this.rightList.map((item) => {
        if (data[item.key] === 1) {
          checkRight.push(item.title)
        }
      })
      this.upList.map((item) => {
        if (data[item.key] === 1) {
          checkUp.push(item.title)
        }
      })
      this.customRights.map((item) => {
        if (data.rights.length > 0) {
          data.rights.map((aitem) => {
            if (aitem === item.id) {
              checkCustom.push(item.id)
            }
          })
        }
      })
      this.checkRight = checkRight
      this.checkUp = checkUp
      this.checkCustom = checkCustom
      this.last_growth = data.last_level_growth + 1
      this.next_level_growth = data.next_level_growth - 1
      this.last_level_growth = `${this.last_growth} 至 ${this.next_level_growth}`
      this.goods_id = data.goods_id.length > 0 ? data.goods_id[0] : ''
      this.stored_id = data.stored_id.length > 0 ? data.stored_id[0] : ''
      data.is_goods = data.goods_id.length > 0 ? 1 : 0
      data.over_time = data.over_time === 0 ? -1 : data.over_time
      for (let key in this.subForm) {
        this.subForm[key] = data[key]
      }
      let arr = ['growth', 'integral', 'send_integral']
      arr.map((item) => {
        if (this.subForm[item] === 0) {
          this.subForm[item] = ''
        }
      })
      if (data.coupon.length < 1) return
      let multipleSelection = []
      let couponArr = []
      data.coupon.map((item) => {
        couponArr.push(item.coupon_id)
      })
      this.quan_list.map((item) => {
        if (couponArr.includes(item.id)) {
          data.coupon.map((aitem) => {
            if (item.id === aitem.coupon_id) {
              item.num = aitem.num
            }
          })
          multipleSelection.push(item)
        }
      })
      this.multipleSelection = multipleSelection

      console.log('tttt', this.subForm)
    },
    async submitFormInfo () {
      let subForm = JSON.parse(JSON.stringify(this.subForm))
      let formArr = ['aForm']
      let flag = true
      for (let i = 0, len = formArr.length; i < len; i++) {
        this.$refs[formArr[i]].validate((valid) => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (flag) {
        if (this.multipleSelection.length < 1 && subForm.coupon_switch === 1) {
          this.$message.error(`请选择优惠券`)
          return
        }

        if (subForm.coupon_switch === 1) {
          let coupon = []
          this.multipleSelection.map((item) => {
            coupon.push({ coupon_id: item.id, num: item.num })
          })
          subForm.coupon = coupon
        }

        let rights = []
        this.rightList.map((item) => {
          subForm[item.key] = 0
          if (this.checkRight.length < 1) return
          this.checkRight.map((aitem) => {
            if (item.title === aitem) {
              subForm[item.key] = 1
              rights.push({ id: item.id, type: 0 })
            }
          })
        })
        this.upList.map((item) => {
          subForm[item.key] = 0
          if (this.checkUp.length < 1) return
          this.checkUp.map((aitem) => {
            if (item.title === aitem) {
              subForm[item.key] = 1
              rights.push({ id: item.id, type: 0 })
            }
          })
        })
        this.customRights.map((item) => {
          if (this.checkCustom.length < 1) return
          this.checkCustom.map((aitem) => {
            if (item.id === aitem) {
              rights.push({ id: item.id, type: 1 })
            }
          })
        })
        subForm.rights = rights
        subForm.goods_id =
          subForm.is_goods === 1 && this.goods_id ? [this.goods_id] : []
        subForm.stored_id =
          subForm.stored_switch === 1 && this.stored_id ? [this.stored_id] : []

        let msg = !subForm.integral
          ? '请输入积分倍率'
          : !/^\+?[0-9]*$/.test(subForm.integral)
            ? '请输入非负整数'
            : subForm.integral * 1 < 1 || subForm.integral * 1 > 99
              ? '请输入大于0小于100的整数'
              : ''
        if (subForm.integral_switch === 1 && msg) {
          this.$message.error(`积分倍率: ${msg}`)
          return
        }
        let sendMsg = !subForm.send_integral
          ? '请输入赠送积分'
          : !/^\+?[0-9]*$/.test(subForm.send_integral)
            ? '请输入非负整数'
            : subForm.send_integral * 1 < 1 || subForm.send_integral * 1 > 999998
              ? '请输入大于0小于999999的整数'
              : ''
        if (subForm.send_integral_switch === 1 && sendMsg) {
          this.$message.error(`赠送积分: ${sendMsg}`)
          return
        }

        if (subForm.is_goods === 1 && !this.goods_id) {
          this.$message.error(`请选择商品`)
          return
        }

        if (subForm.stored_switch === 1 && !this.stored_id) {
          this.$message.error(`请选择储值套餐`)
          return
        }

        let { code } = await this.$api.memberLevelUpdate(subForm)
        if (code !== 200) return
        this.$message.success(this.$t('tips.successSub'))
        this.goBack()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-edit-card {
  width: 100%;
  .el-input,
  .el-select,
  .lb-input-number,
  .el-cascader,
  .el-textarea {
    width: 400px;
  }

  .color-item {
    width: 40px;
    height: 58px;
    margin-right: 5px;
    padding-top: 4px;
    border: 1px solid white;
    cursor: pointer;
    .primaryColor {
      width: 28px;
      height: 28px;
      border-radius: 3px;
      border: 1px solid #e6e6e6;
      .color-bg {
        width: 20px;
        height: 20px;
        border-radius: 3px;
      }
    }
    .iconfont {
      color: #429dff;
      margin-top: 5px;
    }
  }
  .color-item.active {
    border: 1px solid #429dff;
    border-radius: 3px;
    box-shadow: 0px 4px 12px 1px rgba(66, 157, 255, 0.15);
  }

  .card-vip {
    width: 343px;
    height: 200px;
    border-radius: 12px;
    .card-vip-bg {
      width: 98px;
      height: 94px;
      right: 0;
      bottom: 0;
    }
    .line-bg {
      padding: 25px;
      background: linear-gradient(
        -90deg,
        rgba(3, 0, 0, 0.2),
        rgba(255, 255, 255, 0.2)
      );
      .flex-y-center {
        .avatar {
          width: 40px;
          height: 40px;
        }
        .nickname {
          font-family: PingFang SC;
        }
        .vip-content {
          width: auto;
          height: 15px;
          display: inline-block;
          margin-left: 30px;
          .trans-sclae {
            transform: scale(0.9);
          }
          .vip-bg {
            width: 43px;
            height: 20px;
            left: -23px;
            bottom: 0px;
          }

          .vip-level {
            width: 19px;
            height: 15px;
            color: #ffb746;
            font-size: 9px;
            left: 0px;
            bottom: 0px;
          }

          .vip-name {
            width: auto;
            height: 15px;
            font-size: 9px;
            padding: 0 5px 0 22px;
            background: #ffb746;
          }
        }
      }
      .f-big-title {
        line-height: 1;
      }
      .card-line {
        width: 100%;
        height: 7px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.4);
        .current {
          width: 40%;
          height: 7px;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
